<template>
  <!-- 排行榜 -->
  <div class="mod-top mod-bg">
    <div class="container">
      <div class="index-hd">
        <h2 class="index-title">排行榜</h2>
        <a href="javascript:;" class="more-right" @click="clickItem">
          更多
          <i class="el-icon-arrow-right"></i>
        </a>
      </div>

      <ul class="toplist-list" v-if="showToplist">
        <li class="toplist-item" v-for="(item, i) in playlists" :key="i">
          <top-list-box :playlist="item" :toplist="toplists[i]"></top-list-box>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TopListBox from "components/toplist/TopListBox.vue";
export default {
  components: {
    TopListBox,
  },
  data() {
    return {
      toplists: [],
      playlists: [],
      showToplist: false,
    };
  },
  mounted() {
    this.getPlaylist();
  },
  methods: {
    clickItem() {
      this.$router.push("/toplists");
    },
    getPlaylist() {
      let arr = [];
      this.axios({
        /* 排行榜接口地址 */
        url: "/toplist",
      })
        .then((res) => {
          this.toplists = res.data.list.slice(0, 5);
          for (let i = 0; i < 5; i++) {
            arr.push(
              this.axios({
                /* 歌单接口地址 */
                url: "playlist/detail?id=" + this.toplists[i].id,
              })
            );
            // 并发请求
            this.axios.all(arr).then(
              this.axios.spread((...res) => {
                [...res].forEach((item) => {
                  this.playlists[i] = item.data.playlist.tracks.slice(0, 5);
                });
                if (this.playlists[i].length == 5) {
                  if (this.playlists.length == 5) {
                    this.showToplist = true;
                  } else {
                    this.showToplist = false;
                  }
                }
              })
            );
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getPla() {
      this.axios({
        /* 排行榜接口地址 */
        url: "/toplist",
      })
        .then((res) => {
          this.toplists = res.data.list.slice(0, 5);
          // console.log(this.toplists);
          // console.log(this.toplists[0].id);
          for (let i = 0; i < 5; i++) {
            let arr = [];
            arr.push(
              this.axios({
                /* 歌单接口地址 */
                url: "playlist/detail?id=" + this.toplists[i].id,
              })
            );
            this.axios.all(arr).then(
              this.axios.spread((...res) => {
                [...res].forEach((item, index) => {
                  this.playlists[index] = item.data.playlist.tracks.slice(0, 5);
                  console.log(this.playlists);
                });
                if (
                  this.playlists.length == 5 &&
                  this.playlists[i].length == 5
                ) {
                  this.showToplist = true;
                }
              })
            );
            // this.axios({
            //   /* 歌单接口地址 */
            //   url: "playlist/detail?id=" + this.toplists[i].id,
            // })
            //   .then((res) => {
            //     this.playlists[i] = res.data.playlist.tracks.slice(0, 5);
            //     // console.log(this.playlists[i]);
            //     // console.log(this.playlists.length);
            //    if (this.playlists.length == 5&&this.playlists[i].length == 5) {
            //       this.showToplist = true;
            //     }
            //   })
            //   .catch((err) => {
            //     console.log(err);
            //   });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>

<style>
.mod-top .index-hd {
  margin-bottom: 20px;
}
.mod-top .more-right {
  position: absolute;
  right: 10px;
  bottom: 5px;
}
.toplist-list {
  font-size: 0;
  margin-right: -20px;
}
.toplist-item {
  display: inline-block;
  z-index: 2;
  width: 20%;
}
</style>